<script lang="ts" setup>
import {ArticlePath} from "~/config/SystemConfig";
import {getArticles, getTopArticleList} from "~/server/article.service";
import {timeAgo} from "~/utils/CommonUtil";

const list = ref({} as any)
const fetchArticles = () => {
  getArticles({
    current: 1,
    size: 9
  }).then(({data}: any) => {
    list.value = data.data.records
  })
}
const getTopList = () => {
  getTopArticleList().then(({data}: any) => {
    list.value = data.data
  })
}
const seasonBtnClick = () => {
  document.body.classList.toggle("season");
}
onBeforeMount(() => {
  fetchArticles()
})
</script>
<template>
  <section class="dynamic-condition">
    <div class='post-operation'>
      <input type="checkbox" id="toggle-new" class="new-btn hidden">
      <label for="toggle-new" class="part-title toggle-new" role="button" title="查看">
        <span class="me" @click='fetchArticles'>博主</span>
        <span class="fr" @click='getTopList'>置顶</span>
      </label>
    </div>
    <div class='flex new-article relative flex-ul'>
      <ul class='flex-ul me'>
        <template v-for='item in list' :key='item.id'>
          <li :class='"fade-before fade-after format-"+item.postType'>
            <a :href='ArticlePath.Path+item.id' class='new-entry-post'>
              <img :src='item.articleCover' :alt='item.articleTitle'>
            </a>
            <time class="post-time" :datetime="item.createTime">{{
                timeAgo(new Date(item.createTime))
              }}
            </time>
            <a class="title line-clamp" :href='ArticlePath.Path+item.id' rel="bookmark">{{
                item.articleTitle
              }}</a>
            <a class='summary line-clamp'>{{ item.articleAbstract }}</a>
            <div class="post-meta">
              <div class="post-mark">
                <span class="category">
                  <a href="javascript:void(0);" rel="category tag">{{ item.categoryName }}</a>
                </span>
                <span class='tag-list'>
                  <template v-for='tag in item.tags'>
                    <a rel='tag'>{{ tag.tagName }}</a>
                  </template>
                </span>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <div class="version" @click="seasonBtnClick">
      <a class="season-btn" role="button">
        <div class="version-btn" role="button">
          <i>2024</i>
          <div class="text">星度年度首页<br></div>
        </div>
      </a>
    </div>
  </section>
</template>
<style scoped>
@import "@/static/css/home/recent.css";
</style>
